<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title>聊城 | 气象交通数据可视化及可视分析</title>
    <link rel="shortcut icon" href="./img/logo.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="./style/layout.css" />
		<script src="./libs/echarts1.min.js"></script>
    <script src="./libs/d3.min.js"></script>
    <script src="./libs/jQuery.js"></script>
    <style>
  </style> 
	</head>
	<body>
		<section class="head">
      <p class="title">聊城 | 气象交通数据可视化及可视分析</p>
    </section>

    <!-- 主体 -->
    <section class="body">
      <!-- 主视图（马赛克图）所在行 -->
      <div class="container-fluid">
        <!-- 行元素 -->
        <div class="row">
          <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
          <!-- 左三 -->
          <div class="col-lg-3">
            <div id="systemTime">
              <input type="date" id="myDate" value="2021-04-01">
              <button type="button" id="btn" class="btn btn-secondary" onmouseover="SubmitEvent()" onmouseleave="SubmitEvent1()" onclick="handleDate()"><span>请选择时间</span></button>
            </div>
            <div id="calendar"></div>
            <div id="scatter"></div>
          </div>
          <!-- 主视图 -->
          <div class="col-lg-9">
            <div id="mosaic">
              <div id="container"></div>
              
              <!-- 2D/3D -->
              <a id="heightBtn">3D</a>

              <!-- 信息栏 -->
              <div class="info" id="text">
                <h3 style="text-align: center;">当日卡口及车流量信息</h3>
                <p onclick="handleMaxSite()"><img src = './img/NO1.png',  width ="30",height ="30" />NO1. <span class="Name" id="maxName">--</span><span id="max"></span></p>
                <p onclick="handleSecondSite()"><img src = './img/NO2.png',  width ="30",height ="30" />NO2. <span class="Name" id="secondName">--</span><span id="second"></span></p>
                <p onclick="handleThirdSite()"><img src = './img/NO3.png',  width ="30",height ="30" />NO3. <span class="Name" id="thirdName">--</span><span id="third"></span></p>
                <p>选中卡口：<span id="val">--</span><span id="trafficFlow">--</span></p>
              </div>


              <!-- 图例 -->
              <div class="legend">
                  <ul class="colors" id="legend-color"></ul>
                  <ul class="labels" id="legend-label"></ul>
              </div>

            </div>
          </div>
        </div>
      </div>

      <!-- 底部一行 -->
      <div class="container-fluid">
        <div class="row">
          <!-- 左 -->
          <div class="col-lg-3">
            <div id="radar"></div>
          </div>

          <!-- 中 -->
          <div class="col-lg-6">
            <div id="windBard"></div>
          </div>

          <!-- 右 -->
          <div class="col-lg-3">
            <div id="ankey"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 高德地图密钥 -->
    <script src="//webapi.amap.com/maps?v=1.4.15&key=15f0709c4d3a550e10da8c2724113535"></script>
    <script src="//webapi.amap.com/loca?v=1.3.2&key=15f0709c4d3a550e10da8c2724113535&dev=1"></script>
    <script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>


    <script type="text/javascript" src="./js/scatter.js"></script>
    <script type="text/javascript" src="./js/line.js"></script>
    <script type="text/javascript" src="./js/heatmap.js"></script>
    <script type="text/javascript" src="./js/radar.js"></script>
    <script type="text/javascript" src="./js/windBard.js"></script>
    <script type="text/javascript" src="./js/ankey.js"></script>
    <script type="text/javascript" src="./js/date.js"></script>
    <script type="text/javascript" src="./js/calendar.js"></script>
    <script type="text/javascript" src="./js/callFigure.js"></script>
    <script type="text/javascript" src="./js/date.js"></script>
    
	</body>
        

</html>
